<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎光临</title>
<style>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .img_c{
    height: 250px;
    width: 250px;
    
  }
<<<<<<< HEAD

    /* 侧栏样式 */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 200px; /* 根据需要调整宽度 */
        background-color: #f4f4f4;
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        z-index: 1000;
        overflow-y: auto; /* 允许侧栏滚动 */
    }

    .nav-list {
        list-style-type: none;
        padding: 0;
    }

    .nav-list li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #ddd;
    }

    .nav-list li a:hover {
        background-color: #ddd;
=======
  
   .sidebar {
        position: fixed; /* 固定定位 */
        top: 20px; /* 距离顶部20px */
        left: 20px; /* 距离左侧20px */
        /* background: #f8f8f8; 背景颜色 */
        padding: 10px; /* 内边距 */
        border: 1px solid #eaeaea; /* 边框 */
        border-radius: 5px; /* 边框圆角 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 盒子阴影 */
        z-index: 1000; /* 确保在最顶层 */
    }
    .nav-list {
        list-style-type: none; /* 移除列表项目符号 */
        padding: 0; /* 移除内边距 */
        border-radius: 1px; /* 边框圆角 */
    }
    .nav-list li a {
        text-decoration: none; /* 移除下划线 */
        color: #333; /* 文字颜色 */
        display: block; /* 使链接充满整个li */
        padding: 5px 0; /* 链接上下内边距 */
        background-color:white;
    }
    .nav-list li a:hover {
        background-color: #e1e1e1; /* 悬停时的背景颜色 */
>>>>>>> branch 'master' of https://gitee.com/joslyn-yang/finalproject.git
    }

  body {
    font-family: Arial, sans-serif; /* 设置字体 */
    background-color: #f8f8f8; /* 设置背景色 */
  }

  .container {
    width: 80%;
    margin: auto; /* 使容器居中 */
    padding: 20px;
  }

  h1, h2 {
    color: #333; /* 设置标题颜色 */
    text-align: center; /* 标题居中 */
    margin-bottom: 20px;
  }

  .menu-item {
  background-color: rgba(255, 255, 255, 0.75); 
   /*  background-color: #fff; 设置菜品项的背景色 */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px; /* 边框圆角效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
  }

  .menu-item img {
    width: 100%; /* 图片宽度撑满容器 */
    height: auto; /* 图片高度自动 */
    margin-bottom: 10px;
  }

  .menu-item h3 {
    margin-bottom: 10px;
  }

  .menu-item p {
    margin-bottom: 10px;
  }

  .add-to-cart {
    display: inline-block; /* 将按钮显示为内联块级元素 */
    background-color: #008CBA; /* 设置按钮背景色 */
    color: white; /* 设置按钮文字颜色 */
    padding: 10px 20px;
    text-decoration: none; /* 移除下划线 */
    border-radius: 5px; /* 按钮边框圆角效果 */
    transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
  }
  
  a{
    display: inline-block; /* 将按钮显示为内联块级元素 */
    background-color: #008CBA; /* 设置按钮背景色 */
    color: white; /* 设置按钮文字颜色 */
    padding: 10px 20px;
    text-decoration: none; /* 移除下划线 */
    border-radius: 5px; /* 按钮边框圆角效果 */
    transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
  }

  .add-to-cart:hover {
    background-color: #005f73; /* 鼠标悬停时的按钮背景色 */
  }

  /* 购物车样式 更新悬浮 */
  #cart {
    background-color: rgba(255, 255, 255, 0.75); 
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
        bottom: 0;
        right: 0;
        width: 300px; /* 根据需要调整宽度 */
        z-index: 1000; /* 确保购物车在页面其他元素之上 */
  }

  #cart-items li {
    list-style-type: none; /* 移除列表项目符号 */
    margin-bottom: 10px;
  }

  #total-price {
    font-weight: bold; /* 总价字体加粗 */
  }
  /*购物车的悬浮窗*/
      .floating-cart {
        position: fixed; /* 固定定位 */
        bottom: 20px; /* 距离页面底部20px */
        right: 20px; /* 距离页面右侧20px */
        width: 250px; /* 设置宽度 */
        background-color: #f9f9f9; /* 背景颜色 */
        border: 1px solid #ccc; /* 边框 */
        padding: 10px; /* 内边距 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        z-index: 9999; /* 确保在最顶层 */
    }
  
        /* 小屏设备（手机）样式 */
@media (max-width: 600px) {
    .container {
        width: 95%;
        padding: 10px;
    }
    .menu-item {
        padding: 5px;
    }
    .menu-item img {
        height: 150px;
    }
    .menu-item h3 {
        font-size: 1.2em;
    }
    .menu-item p {
        font-size: 0.9em;
    }
    .menu-item button {
        padding: 5px 10px;
        font-size: 0.9em;
    }
    #cart {
        padding: 10px;
        
    }
    #cart h2 {
        font-size: 1.2em;
    }
    #cart-items li {
        font-size: 0.9em;
    }
    #checkout-btn {
        padding: 5px 10px;
        font-size: 0.9em;
    }
}

/* 中等屏幕（平板）样式 */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        width: 85%;
    }
    .menu-item img {
        height: 180px;
    }
}

/* 大屏设备（桌面）样式 */
@media (min-width: 1025px) {
    .container {
        width: 70%;
    }
    .menu-item img {
        height: 200px;
    }
}
    </style>
     
</head>
<body>
<%	
    String customer_name = request.getParameter("customer_name");
    String restaurant_name = request.getParameter("restaurant_name");
    System.out.print(restaurant_name);
%>

<%
//上传选择的餐厅

Class.forName("org.mariadb.jdbc.Driver");
Connection connx = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
Statement stmtx = connx.createStatement();
String sqlx = "UPDATE `customers` SET res = '" + restaurant_name + "' WHERE `name` = '" + customer_name + "'";
stmtx.executeUpdate(sqlx);

%>
<div class="container">
    <h1><%=restaurant_name%>的菜品列表</h1>
    <h2>欢迎用户:<%=customer_name%></h2>
<<<<<<< HEAD
    
    <!-- 侧栏导航 -->
<div class="sidebar">
    <ul class="nav-list">
        <li><a href="#category1">主厨推荐</a></li>
        <li><a href="#category2">凉盘精选</a></li>
        <li><a href="#category3">甜点</a></li>
        <li><a href="#category4">主食及小料</a></li>
        <!-- 更多分类 -->
    </ul>
</div>

=======
    <!-- 侧栏导航 -->
<div class="sidebar">
    <ul class="nav-list">
        <li><a href="#category1">主厨推荐</a></li>
        <li><a href="#category2">主食精选</a></li>
        <li><a href="#category3">甜点</a></li>
        <li><a href="#category4">小料</a></li>
        <!-- 更多分类 -->
    </ul>
</div>
<!-- //菜品分类 -->
<div id='category1'><h3>主厨推荐</h3><br/><hr/>
>>>>>>> branch 'master' of https://gitee.com/joslyn-yang/finalproject.git
    <%
    Connection conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
    Statement stmt = conn.createStatement();
        String sql ="select * from meal_detail WHERE active !='缺货' AND catgory = '主厨推荐';";
        ResultSet rs = stmt.executeQuery(sql);
        while (rs.next()){
            String name = rs.getString("name");
            String img = rs.getString("img");
            String state = rs.getString("state");
            String price = rs.getString("price");
    %>
    
    <div class="menu-item">
        <div class='img_c'><img src="<%=img%>" alt="菜品图片"></div>
        <h3><%=name%></h3>
        <p><%=state%></p>
        <h2>价格: <%=price%></h2>
        <a class="add-to-cart" href='add_cart.jsp?customer_name=<%=customer_name%>&meal_name=<%=name%>&meal_price=<%=price%>&restaurant_name=<%=restaurant_name%>'>添加到购物车</a>
    </div>
    <%}
        rs.close();
        stmt.close();
        conn.close();%>
		</div>
		
				
		<div id='category2'><h3>主食精选</h3><br/><hr/>
    <%
    Connection conn5 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
    Statement stmt5 = conn5.createStatement();
        String sql5 ="select * from meal_detail WHERE active !='缺货' AND catgory = '主食精选';";
        ResultSet rs5 = stmt5.executeQuery(sql5);
        while (rs5.next()){
            String name = rs5.getString("name");
            String img = rs5.getString("img");
            String state = rs5.getString("state");
            String price = rs5.getString("price");
    %>
    
    <div class="menu-item">
        <div class='img_c'><img src="<%=img%>" alt="菜品图片"></div>
        <h3><%=name%></h3>
        <p><%=state%></p>
        <h2>价格: <%=price%></h2>
        <a class="add-to-cart" href='add_cart.jsp?customer_name=<%=customer_name%>&meal_name=<%=name%>&meal_price=<%=price%>&restaurant_name=<%=restaurant_name%>'>添加到购物车</a>
    </div>
    <%}
        rs5.close();
        stmt5.close();
        conn5.close();%>
		</div>

			
		<div id='category3'><h3>甜点</h3><br/><hr/>
    <%
    Connection conn6 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
    Statement stmt6 = conn6.createStatement();
        String sql6 ="select * from meal_detail WHERE active !='缺货' AND catgory = '甜点';";
        ResultSet rs6 = stmt6.executeQuery(sql6);
        while (rs6.next()){
            String name = rs6.getString("name");
            String img = rs6.getString("img");
            String state = rs6.getString("state");
            String price = rs6.getString("price");
    %>
    
    <div class="menu-item">
        <div class='img_c'><img src="<%=img%>" alt="菜品图片"></div>
        <h3><%=name%></h3>
        <p><%=state%></p>
        <h2>价格: <%=price%></h2>
        <a class="add-to-cart" href='add_cart.jsp?customer_name=<%=customer_name%>&meal_name=<%=name%>&meal_price=<%=price%>&restaurant_name=<%=restaurant_name%>'>添加到购物车</a>
    </div>
    <%}
        rs6.close();
        stmt6.close();
        conn6.close();%>
		</div>

		<div id='category4'><h3>小料</h3><br/><hr/>
    <%
    Connection conn7 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
    Statement stmt7 = conn7.createStatement();
        String sql7 ="select * from meal_detail WHERE active !='缺货' AND catgory = '小料';";
        ResultSet rs7 = stmt7.executeQuery(sql7);
        while (rs7.next()){
            String name = rs7.getString("name");
            String img = rs7.getString("img");
            String state = rs7.getString("state");
            String price = rs7.getString("price");
    %>
    
    <div class="menu-item">
        <div class='img_c'><img src="<%=img%>" alt="菜品图片"></div>
        <h3><%=name%></h3>
        <p><%=state%></p>
        <h2>价格: <%=price%></h2>
        <a class="add-to-cart" href='add_cart.jsp?customer_name=<%=customer_name%>&meal_name=<%=name%>&meal_price=<%=price%>&restaurant_name=<%=restaurant_name%>'>添加到购物车</a>
    </div>
    <%}
        rs7.close();
        stmt7.close();
        conn7.close();%>
		</div>	
		
    <!-- 购物车区域 -->
    <div id="cart" class="floating-cart">
        <h2>购物车</h2>
        <ul id="cart-items">
         <%
        Connection conn2 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
        Statement stmt2 = conn2.createStatement();
        String sql2 ="select * from cart Where customer_name='"+customer_name+"'";
        ResultSet rs2 = stmt2.executeQuery(sql2);
        while (rs2.next()){
            String meal_name = rs2.getString("meal_name");
            String meal_price = rs2.getString("meal_price");
            String num = rs2.getString("num");
            
    %><li>菜品名称:<%=meal_name %></li>
		<li>菜品价格:<%=meal_price %>  |  数量:<%=num %><br><br></li>
    
    <%}  %>
        </ul>
        <%rs2.close();
        stmt2.close();
        Statement stmt3 = conn2.createStatement();
        String sql3 ="SELECT SUM(meal_price * num) AS total_sum FROM cart WHERE customer_name = '"+customer_name+"'";
        ResultSet rs3 = stmt3.executeQuery(sql3);
        String total_sum = "0.0";
        if(rs3.next()){
        	total_sum = rs3.getString("total_sum");
        }else total_sum = "0.0"; %>
        <p>总计: ￥<span id="total-price"><%=total_sum %></span></p>
        <a href='viewOrders.jsp?customer_name=<%=customer_name%>&restaurant_name=<%=restaurant_name %>'>结账</a>
        <a href='choseDesk.jsp?customer_name=<%=customer_name%>&restaurant_name=<%=restaurant_name %>'>选桌号？</a>
    </div>
</div>
</body>
</html>